<template>
  <div class="body-content">
    <!--主区域内容-->
    <section id="mainContent">
      <components ref="views" :is="currentView" :sub-args="subArgs" v-on:changeView="changeView" v-on:backPrev="backPrev" v-on:getSelfDistrict="getDatas" v-on:deleteCurrentDistrict="deleteCurrentDistrict"></components>
    </section>
  </div>
</template>
  <script>
  import $ from 'jquery'
  import {GloabFun,Animation,HttpServer} from '../../../assets/js/common.js'
    /****图书管理****/
  const BookManagement = resolve => require(['./BookManagement/Index.vue'], resolve)
  export default {
    components: {
      BookManagement
    },
    data() {
      return {
        // hasLogin:false,
        navDatas:[],
        menuList:[],
        horizonMenuList:[],
        activeName:'',
        currentView:'BookManagement',
        preView:[],
        subArgs:{},
        navArgs:[],
        indexView:'',
        currentLanguage:this.$t('message.cnLanguage'),
        otherLanguage:this.$t('message.enLanguage'),
        nickName:'测试',
        horizonActive:0,
        //currentHorizon:null,
        uid:'admin',
        initTime:true,
        currentScrollTop:0
      }
    },
    methods: {
     generateSubargsObj(array){
       var obj={};
       array.forEach(function(item,index){
          switch(index){
             case 0:
             obj.view=item;
             break;
             case 1:
             obj.id=item;
             break;
             case 2:
             obj.name=item;
             break;
          }
       });
       return obj;
     },
     selectMenuHandle(viewStr) {
      // console.log('viewStr',viewStr)
      var argsObj=this.generateSubargsObj(viewStr.split(";"));
      this.changeView(argsObj.view,argsObj.name);
     },
     changeView(view,name){
        GloabFun.clearRecordPreview.call(this);
        window.clearInterval(window.deviceIntervalid);
        window.clearInterval(window.deviceDetailIntervalid);
        this.subArgs.CurrentView=name;
        Animation.animation($("#mainContent"),function(){
          this.currentView=view;
        }.bind(this));
     },
     backPrev(){
     },
     formateMenuList(menus){
        this.orederMenu(menus);
        var array=[],temp='',tempArray=[],tempObj={};
        if(menus.length>0){
         for(var i=0;i<menus.length;i++){
          if(temp!=''){
             if(temp===menus[i].Area){
                tempArray.push(menus[i]);
                if(i===menus.length-1){
                  tempObj.title=temp;
                  tempObj.list=tempArray;
                  array.push(tempObj);
                }
             }else{
               tempObj.title=temp;
               tempObj.list=tempArray;
               array.push(tempObj);
               tempArray=[];
               tempObj={};
               tempArray.push(menus[i]);
               temp=menus[i].Area;
               if(i===menus.length-1){
                 tempObj.title=temp;
                 tempObj.list=tempArray;
                 array.push(tempObj);
               }
             }
          }else{
            temp=menus[i].Area;
            tempArray.push(menus[i]);
            if(i===menus.length-1){
               tempObj.title=temp;
               tempObj.list=tempArray;
               array.push(tempObj);
            }
          }
         }
       }
       return array;
     },
     orederMenu(menus){
       Array.prototype.slice.call(menus);
       //var tempArray=menus.concat([]);
       menus.sort(function(a,b){
         return a.Order - b.Order ||a.AreaSort-b.AreaSort;
       });
     },
     editPassword(){
       this.preView.length=0;
       if(this.horizonActive===0){
         this.preView.push(this.indexView);
       }else{
         this.preView.push("Menus");
       }
       
       this.subArgs.CurrentView=this.$t('message.resetPassword');
       GloabFun.clearRecordPreview.call(this);
       Animation.animation($("#mainContent"),function(){
          this.currentView="editPassword";
          $("#mainContent").removeClass("grey-bg");
        }.bind(this));
     },
     deleteCurrentDistrict(Id){
        if(Id.toString()===this.activeName){
           this.activeName='';
        }
     },
     getDatas(){
     }
    },
    created(){

    }
  }
</script>
  <style lang="less"> 
    #dep-content{
      width: 100%;
      height: 100%;
      text-align: center;
      vertical-align: middle;
    }
    .el-submenu .el-menu-item {
      min-width: 100%;
    }
    .el-pagination__editor{
      width: 35px !important;
    }
    .el-pagination .el-select .el-input{
      width: 90px !important;
    }
    .el-menu--horizontal .el-submenu .el-submenu__title{
      height: 50px;
      line-height: 50px;
    }
    .el-menu--horizontal .el-submenu>.el-menu {
      top: 50px;
      padding: 0 0;
    }
    #dep-title{
      width: 100%;
      height: 5%
    }
   //  #leftNav{
   //   .el-menu{
   //     border-radius:0;
   //   }

   // }
  </style>
  <style scoped lang="less">
  @headerH:60PX;
.is-first-active{
  // background-color: rgba(32,160,255,0.8) !important;
  color: rgba(32,160,255,0.8) !important;
}
.body-content{
    // padding: 0 15px;
   height:e("calc(100% - 120px)");
   #leftNav{
     height:100%;
     float:left;
    .el-menu-item.is-active,.el-menu-item.sub_item.is-active{
      // background-color: rgba(32,160,255,0.8) !important;
      color: rgba(32,160,255,0.8) !important;
    }
     #navList{
       height:100%;
     }
     .sub-item{
       padding-left:20px;
       font-size: 15px
     }
   }
   #mainContent{
      // background-color: #F0F0F0;
      height:100%;
      padding: 15px 50px;
      // margin-bottom: 20px;
      // float:right;
   }
   .content{
      height:100%;
      width: 30px;
   }
 }
  @media screen and (max-width: 900px){
         #leftNav{
           width:150px !important;
         }
         #mainContent{
          // background-color: #F0F0F0;
          padding: 15px 50px;
          // background-color: #eef1f6;
          width:e("calc100%") !important;
          // overflow:auto;
          height:100%;
         }
      }
      @media screen and (min-width: 900px){
         #leftNav{
           width:220px !important;
         }
         #mainContent{
          // background-color: #F0F0F0;
          padding: 15px 50px;
          // background-color: #eef1f6;
          width:e("calc100%") !important;
          // overflow:auto;
          height:100%;
         }
      }
</style>